<template>
  <div class="judge">
    <div class="search">
      <el-row class="row">
        <el-col v-for="(item, index) in teachersInfo" :key="index" :span="4">
          <el-button  @click="showClass(item)">{{ item.className }} </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <div>
        <el-row :gutter="10">
          <el-col class="item" v-for="(student, index) in tableData" :key="index" :xs="12" :sm="6" :md="3" :lg="2"
            :xl="1">
            <div @click="showReport(student)">{{ student.studentName }}</div>
            <el-checkbox v-model="student.selected"></el-checkbox>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="group">
      <el-button v-if="tableData.length != 0" type="primary" @click="downloadReports">下载</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <table v-if="studentInfo!=null" class="tableClass">
        <tr>
          <td>学号</td>
          <td>{{studentInfo.studentId}}</td>
          <td>姓名</td>
          <td>{{studentInfo.studentName}}</td>
          <td>班级</td>
          <td>{{studentInfo.className}}</td>
        </tr>
        <tr>
          <td rowspan="2">学科</td>
          <td colspan="4">学业水平考试</td>
          <td>过程评价</td>
        </tr>
        <tr>
          <td colspan="2">项目</td>
          <td>单项等级</td>
          <td>综合等级</td>
          <td>等级</td>
        </tr>
        <tr>
          <td rowspan="2">语文</td>
          <td rowspan="2">展示性评价</td>
          <td>学科实践</td>
          <td><span>{{studentInfo.big[0].disciplinePracticeLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[0].subjectIntegrationLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[0].processEvaluation}}</span></td>
        </tr>
        <tr>
          <td>综合答辩</td>
          <td><span>{{studentInfo.big[0].generalAnswerLev}}</span></td>
        </tr>
        <tr>
          <td rowspan="2">数学</td>
          <td rowspan="2">展示性评价</td>
          <td>学科实践</td>
          <td><span>{{studentInfo.big[1].disciplinePracticeLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[1].subjectIntegrationLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[1].processEvaluation}}</span></td>
        </tr>
        <tr>
          <td>综合答辩</td>
          <td><span>{{studentInfo.big[1].generalAnswerLev}}</span></td>
        </tr>
        <tr>
          <td rowspan="2">英语</td>
          <td rowspan="2">展示性评价</td>
          <td>学科实践</td>
          <td><span>{{studentInfo.big[2].disciplinePracticeLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[2].subjectIntegrationLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[2].processEvaluation}}</span></td>
        </tr>
        <tr>
          <td>综合答辩</td>
          <td><span>{{studentInfo.big[2].generalAnswerLev}}</span></td>
        </tr>
        <tr>
          <td rowspan="2">科学</td>
          <td rowspan="2">展示性评价</td>
          <td>学科实践</td>
          <td><span>{{studentInfo.big[3].disciplinePracticeLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[3].subjectIntegrationLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[3].processEvaluation}}</span></td>
        </tr>
        <tr>
          <td>综合答辩</td>
          <td><span>{{studentInfo.big[3].generalAnswerLev}}</span></td>
        </tr>
        <tr>
          <td rowspan="2">道法</td>
          <td rowspan="2">展示性评价</td>
          <td>学科实践</td>
          <td><span>{{studentInfo.big[4].disciplinePracticeLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[4].subjectIntegrationLev}}</span></td>
          <td rowspan="2"><span>{{studentInfo.big[4].processEvaluation}}</span></td>
        </tr>
        <tr>
          <td>综合答辩</td>
          <td><span>{{studentInfo.big[4].generalAnswerLev}}</span></td>
        </tr>
        <tr>
          <td>劳动</td>
          <td colspan="4">劳动知识、动手实践、课堂表现</td>
          <td><span>{{studentInfo.small.laborLev}}</span></td>
        </tr>
        <tr>
          <td>体育</td>
          <td colspan="4">体育技能、课堂表现</td>
          <td>{{studentInfo.small.peLev}}</td>
        </tr>
        <tr>
          <td>音乐</td>
          <td colspan="4">音乐知识、表演（视唱）、课堂表现</td>
          <td>{{studentInfo.small.musicLev}}</td>
        </tr>
        <tr>
          <td>美术</td>
          <td colspan="4">美术知识、作品、课堂表现</td>
          <td>{{studentInfo.small.artLev}}</td>
        </tr>
        <tr>
          <td>信息技术</td>
          <td colspan="4">信息基础、操作应用、课堂表现</td>
          <td>{{studentInfo.small.itLev}}</td>
        </tr>
        <tr>
          <td colspan="6" rowspan="6">
            <diV style="font-weight:bold;border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom:10px">班主任寄语：
            </diV>
            <p style="text-align:left">
              {{studentInfo.evaluateVo.evaluateInfo}}
            </p>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { teachClasses,studentReportQuery,classStudentQuery } from '@/api/api'
export default {
  data() {
    return {
      tableData: [],
      formData: {
        userId: "T001",
      },
      teachersInfo: {},
      page: 1,
      pageSize: 100,
      isDownload: false,
      dialogVisible: false,
      studentInfo:null,
    };
  },
  created(){
    this.getTeachClasses()
  },
  methods: {
    async getTeachClasses() {
      const res = await teachClasses(this.formData)
      this.teachersInfo = res.data;
      console.log(res)
    },
    async classStudentQuery(row) {
      this.tableData = [];
      let data = {
        queryType: "S",
        page: this.page,
        count: this.pageSize,
        classId: row.classId,
        userId: row.userId,
        classGrade: row.classGrade,
        subjectName: row.subjectName
      }
      const res = await classStudentQuery(data);
      this.tableData = res.data.objects;
    },
     async getStudentReportQuery(data){
        let row={
          className:this.teachersInfo[0].className,
          classGrade:this.teachersInfo[0].classGrade,
          studentId:data.studentId,
        }
        const res = await studentReportQuery(row);
        this.studentInfo = res.data;

        console.log(res,22222)
     },
    showClass(item) {
      this.classStudentQuery(item)
    },
    showReport(item) {
      this.getStudentReportQuery(item)
      this.dialogVisible = true;
    },
    downloadReports() {
      const selectedStudents = this.tableData.filter(student => student.selected);
      // 批量下载选中学生的报告单
      for (let student of selectedStudents) {
        // 下载操作
        console.log(`下载学生 ${student.studentName} 的报告单`);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.judge {
  margin: 10px;
}

.group {
  text-align: right;
}

.search {
  padding-bottom: 10px;
}

.pagination {
  margin: 10px 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .el-button {
    margin: 5px;
  }
}

.table {
  padding: 10px;

  .item {
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #fff;
    padding: 10px 0;
    border-radius: 5px;
    display: flex;
    background-color: #3975C6;
    align-items: center;
    justify-content: space-around;

  }
}

.tableClass {
  border-collapse: collapse;
  width: 100%;

  th,
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }

}
</style>
